<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/httpUtil.js"></script>
    <script src="js/cacheUtil.js"></script>
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/userLogin.css">
</head>

<body>

<div id="ui">
    <div class="user">
        <!--log-->
        <div class="logo">
            <a href=#>
                <img id="logo_img" src="img/logo.png" class="img-rounded"></a>
        </div>
        <!-- uiView:  -->
        <div id="nav_box">
            <span id="passLogin" class="active"><a href="#">密码登录</a></span>
            <span id="messLogin"><a href="#">短信登录</a></span>
        </div>
        <div class="container-fluid full ">
            <!--密码登录-->
            <div id="passwordLogin">
                <div class="form col-md-4 col-md-offset-4 ">
                    <!--用户名-->
                    <label for="username" class="col-md-3 control-label">用户名</label>
                    <div class="form-group">
                        <input id="username" name="username" type="text"
                               class="form-control input-lg" placeholder="用户名">
                    </div>
                    <!--密码-->
                    <label for="password" class="col-md-3 control-label">密码</label>
                    <div class="form-group">
                        <input id="password" name="password" type="password"
                               class="form-control input-lg" placeholder="登录密码">
                    </div>
                    <!--验证码-->
                    <label class="col-md-3 control-label"
                           for="varcode">验证码</label>
                    <div class="from-group">
                        <input class="form-control input-lg" id="varcode" type="text" name="varcode"
                               placeholder="请输入验证码">
                        <div class="vCode">
                            <img id="code_img" alt="点击更换" title="点击更换"
                                 onclick="changeVerifyCode(this)" src="http://localhost:8080/hooc/Kaptcha">
                        </div>
                    </div>
                    <!--登录按钮-->
                    <div class="form-group">
                        <button class="btn btn-success btn-block" onclick="submitLogin()">登录</button>
                    </div>
                    <div class="col-xs-6 col-xs-offset-7">
                        <a href="#">忘记密码</a>
                        <a href="register.html">立即注册</a>
                    </div>
                </div>
            </div>
        </div>
        <!--短信登录-->
        <div id="phoneLogin" style="display: none">
            <form id="login_phone" action="login" method="post"
                  class="form col-md-4 col-md-offset-4 " display="none">
                <!--用户名-->
                <label for="phone" class="col-md-3 control-label">手机号</label>
                <div class="form-group">
                    <input id="phone" name="username" type="text"
                           class="form-control input-lg" placeholder="手机号">
                </div>
                <!--密码-->
                <label for="phone_code" class="col-md-3 control-label">手机验证码</label>
                <div class="form-group">
                    <input id="phone_code" name="password" type="password"
                           class="form-control input-lg" placeholder="手机验证码">
                </div>

                <!--登录按钮-->
                <div class="form-group">
                    <button id="submit2" class="btn btn-success btn-block">登录</button>
                </div>
                <div class="col-xs-4 col-xs-offset-9">
                    <a href="register.html">立即注册</a>
                </div>
            </form>
        </div>

    </div>
</div>
<script>
    let passLogin = document.getElementById("passLogin");
    let messLogin = document.getElementById("messLogin")
    passLogin.onclick = function () {
        passLogin.className = "active";
        messLogin.className = "";
        passwordlogin();
    }
    messLogin.onclick = function () {
        messLogin.className = "active";
        passLogin.className = "";
        phonelogin();
    }

    function phonelogin() {
        var active = document.getElementsByClassName("active");
        active.class = "";
        var phoneLogin = document.getElementById("phoneLogin");
        var passwordLogin = document.getElementById("passwordLogin");
        passwordLogin.style.display = "none";
        phoneLogin.style.display = "block";
    }

    function passwordlogin() {
        var phoneLogin = document.getElementById("phoneLogin");
        var passwordLogin = document.getElementById("passwordLogin");
        passwordLogin.style.display = "block";
        phoneLogin.style.display = "none";
    }

    /*刷新验证码*/
    function changeVerifyCode(img) {
        img.src = "http://localhost:8080/hooc/Kaptcha?" + Math.floor(Math.random() * 100)
    }


    function submitLogin() {
        //ajax 请求后台登录校验
        let url = "/user/login";
        let params = {
            userName: $("#username").val(),
            password: $("#password").val(),
            vCode: $("#varcode").val()
        };
        console.log("shu" + params);
        httpPost(url, params, function (data) {
            //登录成功
            //登录成功，保存用户信息到浏览器缓存
            saveLoginUser(data);
            console.log("user is:" + data);
            //跳转首页
            top.location.href = "index.html";
            console.log("href begin");
        })
    }
</script>
</body>
</html>